<template>
  <div class="cart-list">
    <template v-if="cartList.length">
      <cart-list-item
        v-for="item in cartList"
        :key="item.iid"
        :cartItem="item"
      ></cart-list-item>
    </template>
    <div v-else class="cart-tips">
      <p>购物车空空如也~</p>
      <button @click="goToHome" class="tips-button">去逛逛</button>
    </div>
  </div>
</template>

<script>
import CartListItem from "./CartListItem.vue";

import { mapGetters } from "vuex";

export default {
  components: {
    CartListItem
  },
  computed: {
    ...mapGetters(["cartList"])
  },
  methods: {
    goToHome() {
      this.$router.push("/home");
    }
  }
};
</script>

<style scoped>
.cart-tips {
  text-align: center;
  padding: 100px;
  font-size: 18px;
}
.cart-tips .tips-button {
  padding: 8px;
  border-radius: 10px;
  margin-top: 10px;
}
</style>
